<template>
    <i-circle
        :size="180"
        :trail-width="4"
        :stroke-width="5"
        :percent="percent"
        stroke-linecap="round"
        stroke-color="#43a3fb">
        <div class="demo-Circle-custom">
            <h1>{{item.finish}} / {{item.total}}</h1>
            <p>{{item.describe}}</p>
            <span>
                总占比例
                <i>{{(percent = item.percent).toFixed(2)}}%</i>
            </span>
        </div>
    </i-circle>
</template>

<script>
export default {
    data() {
        return {
            percent: 0
        }
    },
    props: {
        item: {
            type: Object,
            default: () => { 
                return {
                    finish: 0,
                    total: 0,
                    describe: "",
                    percent: 0
                };
            }
        }
    }
}
</script>

<style lang="scss">
@import "@task/scss/record-circle.scss";
</style>